<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <h2>商品列表</h2>
      <ul>
        <li v-for="product in products">
          <span>{{product.name}}</span><button @click="addToCart(product)">+</button>
        </li>
      </ul>
      <h2>我的购物车</h2>
      <ul>
        <li v-for="product in cart.added">
          <span>{{product.name}}</span>
        </li>
      </ul>
      <button @click="checkout(cart.added)">结算</button>
    </div>
    <script src="vue.js"></script>
    <script src="vuex.js"></script>
    <script>
      const types = {
        ADD_TO_CART:'ADD_TO_CART',//添加到购物车
        CHECKOUT_REQUEST:'CHECKOUT_REQUEST',//发起结算请求
        CHECKOUT_SUCCESS:'CHECKOUT_SUCCESS',//结算成功
        CHECKOUT_FAILURE:"CHECKOUT_FAILURE"//结算失败
      }
      const shop = {
        buyProducts(products,success,failure){
          setTimeout(()=>{
            if(Math.random()>.5){
              success();
            }else{
              failure();
            }
          },1000);
        }
      }
      Vue.use(Vuex);
      const store = new Vuex.Store({
        state:{
          products:[//商品列表
            {id:1,name:'apple',price:1000},
            {id:2,name:'banana',price:2000},
            {id:3,name:'cherry',price:3000},
          ],
          cart:{//添加到购物车中的商品
            added:[]
          }
        },
        mutations:{
          //添加一个mutation变更函数，变更类型为ADD_TO_CART
          [types.ADD_TO_CART](state,product){
            //接收一个类型和一个payload,payload就是要添加的商品
            //把商品添加到购物车里
            state.cart.added.push(product);
          },
          [types.CHECKOUT_REQUEST](state){
            state.cart.added=[];
          },
          [types.CHECKOUT_SUCCESS](state){
             console.log('checkout is successfully')
          },
          //如果结算失败了，回退备份的购物车条目
          [types.CHECKOUT_FAILURE](state,savedCartItems){
            state.cart.added=savedCartItems;
          }
        },
        actions:{
          checkout({state,commit},products){
            //对购物车商品做一个浅克隆，复制一份
            const savedCartItems = [...state.cart.added];
            //准备发起结算请求，此时可以乐观的先把清空购物车
            commit(types.CHECKOUT_REQUEST);
            //调用后端接口，提交结算请求
            shop.buyProducts(
              products,
              //如果成功了，提交CHECKOUT_SUCCESS变更
              ()=>commit(types.CHECKOUT_SUCCESS),
              //如果失败了，提交CHECKOUT_FAILURE变更
              ()=>commit(types.CHECKOUT_FAILURE,savedCartItems)
            );
          }
        }
      });
      var vm = new Vue({
        el:'#app',
        store,
        computed:{
          ...Vuex.mapState(['products','cart'])
        },
        methods:{
          addToCart(product){
            this.$store.commit(types.ADD_TO_CART,product);
          },
          checkout(products){
            this.$store.dispatch('checkout',products);
           
          }
        }
      });
    </script>
  </body>
</html>
